<template>
  <div class="app-container">
    <el-button
      icon="el-icon-plus"
      type="primary"
      @click="cameraAuth={};dialogBindDeviceFormVisible = true"
    />
    <el-table
      :data="deviceCameraList"
      style="width: 100%"
    >

      <el-table-column prop="userName" :label="$t('name')" />
      <el-table-column prop="serverCompany" :label="$t('type')" :formatter="formatCameraType" />
      <el-table-column :label="$t('status')">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ formatStatus(scope.row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="120" :label="$t('function')">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right;">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-sizes="[10,20,30,40]"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :visible.sync="dialogBindDeviceFormVisible"
    >
      <el-form
        label-width="120px"
      >
        <el-form-item :label="$t('type')">
          <el-select
            v-model="cameraAuth.serverCompany"
            :disabled="cameraAuth.authId"
            clearable
            filterable
            @change="formServerCompanyChange"
          >
            <el-option
              v-for="(item,index) in serverList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('ip')">
          <el-input v-model="cameraAuth.serverIp" />
        </el-form-item>
        <el-form-item :label="$t('user')+$t('name')">
          <el-input v-model="cameraAuth.userName" />
        </el-form-item>
        <el-form-item :label="$t('password')">
          <el-input v-model="cameraAuth.password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBindDeviceFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="insertOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { cancelNotice, failureNotice, formatCameraType, listCameraType } from '@/util/common'
import { deleteCameraAuth, insertCameraAuth, pageGetCameraAuth, updateCameraAuth } from '@/api/camera/cameraAuthApi'
import { getPageSize, getUserId, setPageSize } from '@/util/storage'

export default {
  name: 'CameraManage',
  data() {
    return {
      deviceCameraList: [],
      dialogBindDeviceFormVisible: false,
      cameraAuth: {
        userName: '',
        password: '',
        serverIp: '',
        serverCompany: null
      },
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      serverList: listCameraType(this)
    }
  },
  mounted() {
    this.userId = getUserId()
    this.pageGetCameraAuth()
  },
  methods: {
    formatStatus(item) {
      if (item.status === 1) {
        return this.$t('enable')
      } else {
        return this.$t('disable')
      }
    },
    formatCameraType(item) {
      return formatCameraType(this, item.serverCompany)
    },
    insertOrUpdate() {
      const json = {
        userId: this.userId,
        ...this.cameraAuth
      }
      let res
      if (this.cameraAuth.authId) {
        res = updateCameraAuth(json)
      } else {
        res = insertCameraAuth(json)
      }

      res.then(res => {
        const { code, msg } = res
        if (code === '200') {
          this.pageGetCameraAuth()
          this.dialogBindDeviceFormVisible = false
        } else {
          failureNotice(this, msg)
        }
      })
    },
    formServerCompanyChange(val) {
      this.cameraAuth.serverCompany = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetCameraAuth()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetCameraAuth()
    },
    pageGetCameraAuth() {
      pageGetCameraAuth({
        userId: this.userId,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.deviceCameraList = data.data
        }
      })
    },
    edit(item) {
      item.password = null
      this.cameraAuth = item
      this.dialogBindDeviceFormVisible = true
    },
    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + this.$t('auth'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteCameraAuth({
            authId: item.authId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetCameraAuth()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>
